<template>
    <div>
        <el-menu
                :default-active="activeIndex2"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                text-color="#dcdfe6"
                active-text-color="#aquamarine">

            <el-menu-item index="3" style="display: inline;margin-left: 300px;color:cyan" @click="$router.push('/index')">我的主页
            </el-menu-item>

            <el-menu-item index="9" style="display: inline;margin-left: 5px;color:cyan"  v-if="token!=null"  @click="$router.push('/myphote')">我的相册</el-menu-item>
            <el-menu-item index="5" style="display: inline;margin-left: 5px;color:cyan" @click="$router.push('/author')">关于作者版
            </el-menu-item>
<!--            <el-menu-item index="7" style="display: inline;margin-left: 5px;color:cyan"  @click="$router.push('/moveconten')">留言板</el-menu-item>-->
<!--            <el-menu-item index="9" style="display: inline;margin-left: 5px;" @click="$router.push('/creaBok')">主页面</el-menu-item>-->
            <el-submenu index="8" v-if="token!=null" style="display:inline; float: right;margin-right: 300px;">
                <template slot="title">
                    <el-image  :src="userInfo.ima" style="width: 50px;height: 50px;border-radius: 100%;"></el-image>
                </template>
                <el-menu-item index="5-1"  @click="$router.push('/onlyone')" style="color: #ebb563">个人中心</el-menu-item>
                <el-menu-item index="5-2" @click="exit()" style="color: #ebb563">退出</el-menu-item>
            </el-submenu>

            <el-menu-item index="4" v-if="token==null" style="display:inline; float: right;margin-right: 300px;color:cyan"
                          @click="$router.push('/login')">用户登录
            </el-menu-item>
            <el-menu-item index="6" v-if="token==null" style="display:inline; float: right;margin-left: 15px;color:cyan"
                          @click="$router.push('/rigest')">账号注册
            </el-menu-item>

        </el-menu>
    </div>
</template>

<script>

    export default {
        name: "daohang",
        // inject: ['reload'],//方法注入
        data() {
            return {
                activeIndex: '1',
                activeIndex2: '1',
                token: localStorage.getItem('TOKEN'),
                src: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1483802554,2802139947&fm=11&gp=0.jpg',
                userInfo:{},
            };
        },
        created() {
            this.$axios.get("/api/user/main/info",{headers:{TOKEN:this.token}}).then(res=>{
                this.userInfo = res.data.data;
            })
        },


        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },

            exit() {
                //个人中心的内容在退出后 重定向到index
                if (this.$router.push !== '/index') {
                    this.$router.replace('/index');

                }
                //1.清除标记的
                localStorage.removeItem("TOKEN");
                this.$router.go(0);
                this.reload();
                //2.怎么同步呢？
                this.token = null;
                this.$message({
                    message: '退出成功！',
                    type: 'success',
                });


            },


        },

    }
</script>

<style scoped>
        .el-menu-demo{
            background-image: url("https://img2.baidu.com/it/u=355152815,2181560793&fm=26&fmt=auto&gp=0.jpg");
            background-size: 100%;
        }
</style>